<template>
    <div class="header-container">
        <!-- 顶部信息栏 -->
        <div class="top-bar">
            <div class="top-content">
                <div class="left">今生永恒网 — 创建于2006年，大型网上纪念馆平台，绿色网上祭墓、网上扫墓</div>
                <div class="right">
                    <div v-if="userStore.userInfo.id">
                        <span class="user-name" @click="goInfo">{{ userStore.userInfo.nickname }}</span>
                        <span class="divider">|</span>
                        <span class="logout" @click="logout">退出</span>
                        <span class="divider">|</span>
                        <span class="center" @click="goCenter">管理中心</span>
                        <span class="divider">|</span>
                        <span class="help" @click="goHelp">帮助中心</span>
                    </div>
                    <div v-else>
                        <span class="logout" @click="goLogin">用户登录</span>
                        <span class="divider">|</span>
                        <span class="logout" @click="goRegister">免费注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, toRaw, onMounted, defineProps } from 'vue';
    import useUserStore from '@/stores/modules/user';
    import { useRouter, useRoute } from 'vue-router';
    const searchQuery = ref<string>('');
    const userStore = useUserStore();
    const router = useRouter();
    const route = useRoute();
    const emit = defineEmits(['search'])
    // 父传子
    const props = defineProps({
        name: {
            type: String,
            default: ''
        }
    })
    const getPath = () => {
        let path = '/'
        if(route.query.pid){
            path = route.path + '?pid=' + route.query.pid
        }else{
            path = route.path
        }
        return path
    }
    const goLogin = () => {
        router.push('/login')
    }
    const goRegister = () => {
        router.push('/register')
    }
    const goCenter = () => {
        router.push('/memorialManage')
    }
    const goHelp = () => {
        router.push('/article?pid=4')
    }
    const goSearch = () => {
        if(route.path == '/memorialList'){
            emit('search', searchQuery.value)
        }else{
            router.push('/memorialList?name=' + searchQuery.value)
        }
    }
    const logout = () => {
        userStore.logout()
    }
    const goInfo = () => {
        router.push('/memorialManage?path=info')
    }

    onMounted(()=>{
        // searchQuery.value = props.name
        searchQuery.value = route.query.name as string
    })

</script>

<style scoped>
.header {
    width: 100%;
    height: 100px;
    /* background-color: #fff; */
    padding: 20px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-content {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top-bar {
    /* background-color: #f5f5f5; */
    padding: 8px 0;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #ddd;
}

.top-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.top-content a {
    color: #666;
    text-decoration: none;
}

.top-content a:hover {
    color: #F16C20 !important;
}

.divider {
    margin: 0 10px;
    color: #ddd;
}

.header-content {
    max-width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    margin-right: 10px;
}

.logo-text {
    font-size: 24px;
    color: #333;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-label {
    color: #666;
    white-space: nowrap;
}

.search-input {
    width: 300px;
}

.search-btn {
    padding: 12px 20px;
}

.main-nav {
    background-color: #EFDBA7;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
}

.main-menu {
    background-color: transparent;
    border-bottom: none;
}

.main-menu :deep(.el-menu-item) {
    font-size: 16px;
    color: #333;
}
.main-menu :deep(.el-menu-item):hover {
    background-color: transparent !important;
    color: #F16C20 !important;
}
.main-menu :deep(.el-menu-item.is-active) {
    color: #F16C20 !important;
    border: none !important;
}

.main-content {
    width: 100%;
    flex: 1;
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto 0;
}

.user-name{
    cursor: pointer;
}
.user-name:hover{
    color: #F16C20;
}
.logout{
    cursor: pointer;
}
.logout:hover{
    color: #F16C20;
}
.center{
    cursor: pointer;
}
.center:hover{
    color: #F16C20;
}
.help{
    cursor: pointer;
}
.help:hover{
    color: #F16C20;
}
::deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    background-color: transparent !important;
}
</style>